import React, { PureComponent, Fragment } from 'react';
import { Modal, Form, Row, Input, Alert } from 'antd';
// import { connect } from 'dva';
import lodash from 'lodash';
// import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getRoleInfo } from '../../services/manage-by-role-controller';
// import { ResourcesTypeArray } from '../../utils/enum';
// import classNames from 'classnames';
import styles from './RoleManageAdd.less';

@Form.create()
export default class RoleManageAdd extends PureComponent {

  onCreate = () => {
    const { form, onOk } = this.props;
    if (!(onOk instanceof Function)) return;
    form.validateFields((err, formValues) => {
      if (err) return;
      onOk(formValues);
    });
  }

  render() {
    const { roleData, saveForm, visible, confirmLoading, onCancel, form } = this.props;
    const { getFieldDecorator } = form;
    if (saveForm instanceof Function) saveForm(form);
    const width = 525;
    return (
      <Modal
        width={700}
        visible={visible}
        confirmLoading={confirmLoading}
        title="新增角色"
        okText="确定"
        onCancel={onCancel}
        onOk={this.onCreate}
        maskClosable={false}
        bodyStyle={{ padding: '12px 24px 0 24px' }}
      >
        <Alert
          style={{ marginBottom: 8 }}
          type="info"
          message="角色名称命名规则(建议)："
          description={(
            <Fragment>
              <ol style={{ margin: 0, paddingLeft: 20 }}>
                <li>{`全局角色(拥有多个系统的权限)命名规则：[全局]-{名称}，如：[全局]-财务管理员`}</li>
                <li>{`单个系统角色(只拥有一个系统的权限)命名规则：[系统名称]-{名称}，如：[奖励系统]-运营管理员`}</li>
              </ol>
            </Fragment>
          )}
        />
        <Form layout="inline" className={styles.form}>
          <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
            <Form.Item label="角色名称" hasFeedback>
              {getFieldDecorator('name', {
                initialValue: roleData ? roleData.name : undefined,
                validateFirst: true,
                rules: [
                  { required: true, whitespace: false, min: 6, max: 63, message: '角色名称长度必须6~63字符' },
                  {
                    validator(_, value, callback) {
                      const errors = [];
                      if (!value || lodash.trim(value) === '') {
                        errors.push("角色名称不能为空");
                        callback(errors);
                        return;
                      }
                      getRoleInfo(value).then(result => {
                        if (result) {
                          errors.push("角色已经存在");
                        }
                        callback(errors);
                      });
                    },
                  },
                ],
              })(
                <Input placeholder="角色名称，如：[系统名称]-{名称}" style={{ width }} />
              )}
            </Form.Item>
          </Row>
          <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
            <Form.Item label="角色说明">
              {getFieldDecorator('description', {
                initialValue: roleData ? roleData.description : undefined,
                rules: [
                  { required: false, max: 1023, message: '说明长度不能超过1023个字符' },
                ],
              })(
                <Input.TextArea placeholder="角色说明" rows={5} autosize={{ minRows: 5, maxRows: 10 }} style={{ width, maxWidth: 1000 }} />
              )}
            </Form.Item>
          </Row>
        </Form>
      </Modal>
    );
  }
}
